v1.6.9

Compare Source

v1.6.8

Compare Source

🐛 Bug Fixes

• Now imports FormKitSchema automatically from @formkit/vue when autoImport is true in Nuxt (#​1286)
• Fixes a bug that caused falsey values to not reset properly (#​1509)

v1.6.7

Compare Source

🐛 Bug Fixes

• Fixes compatibility with Vue 3.5.6 (#​1501)
• Indicates compatibility with new v4 nuxt (#​1418)
• Fixes casing for the type prop of datetime-local input (#​1486)
• Keeps placeholder for null or undefined as well (#​1474)

💪 New features

• New validation rules date_before_or_equal, date_after_or_equal, date_before_node, date_after_node

v1.6.6

Compare Source

🐛 Bug fixes

• Fixes a bug that caused cleanup issues in Vue 3.5+ (#​1496).

v1.6.5

Compare Source

🐛 Bug fixes

• Fixes a bug that causes the data-invalid attribute to not be removed when conditionally removing validation rules (#​1384).

v1.6.4

Compare Source

🐛 Bug fixes

• Fixes a bug with validation rule observers that caused rules with external dependencies to stop firing when placed in a certain sequence (#​1371).
• Fixes a bug that caused inputs with no validation rules to receive the data-invalid attribute on reset (regression in 1.6.3) (#​1376)

v1.6.3

Compare Source

💪 New Features

• New clear on submit option for local storage
• New context.state.passing property indicates whether or not a given input is passing all its validation rules.

🐛 Bug fixes

• Fixes auto animate plugin for FormKit components (#​1354).
• On multi-step inputs beforeStepChange is no longer called when the step cannot be advanced (#​1191).
• Quickly typing into an input no longer causes an invalid state flicker (#​1324).

v1.6.2

Compare Source

🐛 Bug fixes

• Widens unocss compatibility for the @formkit/themes package (#​1281).
• Small German translation fix (#​1293).
• Adds additional dependencies to the create-app cli command (#​1233).

v1.6.1

Compare Source

💪 New features

• Adds new experimental (not documented) configuration option mergeStrategy to allow syncing between two nodes of the same name inside the same parent.
• Improves tree shaking of @formkit/inputs package.

🐛 Bug fixes

• Fixes FormKit’s monorepo builds script on windows environments (#​1270).
• Floating label now works as a naked attribute.
• Fixes a bug that could cause the floating label to interfere with Transition components.
• Fixes a bug in findSection that did not properly return values from conditional branches.

v1.6.0

Compare Source

💪 New features

• Adds new composable useFormKitContext for access to the context object of the parent FormKit component — or any other FormKit component in the tree. Optionally, you can provide an effect callback that is run when the context is available.
• Adds new composable useFormKitContextById for access to the context object of any FormKit component with an explicit id. Optionally, you can provide an effect callback that is run when the context is available.
• Adds new composable useFormKitNodeById for access to the node object of any FormKit component with an explicit id. Optionally, you can provide an effect callback that is run when the node is available.
• Adds IntelliSense autocomplete for the type prop of the FormKit component (#​1241).
• Adds new stopWatch function to the @formkit/core package that allows de-registering receipts from the watchRegistry function.
• Adds type generic to getNode<T>() function.
• New integration with @nuxt/tailwindcss that automatically includes the formkit.theme.ts file in the tailwind content.
• Adds new currency and unit icons.
• Adds new library prop to FormKit and FormKitMessages components that allows you to include additional components for the input schema, for example, when using sections-schema to modify the input (#​1145) (#​1137).
• The value type of a FormKit component that is passed a FormKitTypeDefinition is now inferred from the FormKitTypeDefinition.

🐛 Bug fixes

• Fixes bug in changeLocale that caused updated locale to not be used on new nodes (#​1143).
• Fixes tree shaking of the @formkit/icons package (#​1184).
• Adds FormKitIcon component to the autoImport feature of the Nuxt module (#​1168).
• Fixes types for BeforeStepChangeData (#​1224).
• Fixes types for the datetime-local input type (#​1129).
• Vue is now a peerDependency of @formkit/vue to reduce the incidents of multiple Vue instances in the same project (#​1160).
• Adds tabindex and role="button" to the icon wrappers when a click event is added to the icon (#​1210).

v1.5.9

Compare Source

💪 New Features

• Adds ui.open to all i18n locales.

v1.5.8

Compare Source

🧼 Housecleaning

• Updates Vue to 3.4

v1.5.7

Compare Source

💪 New features

• Adds dragHandle icon to genesis icons.

v1.5.6

Compare Source

💪 New features

• Adds dragHandle icon.

v1.5.5

Compare Source

🐛 Bug fixes

• Fixes issue that prevented theme installation using npx formkit theme command.

v1.5.4

Compare Source

💪 New features

• Floating Labels plugin now supports prefix content when calculating label position. (#​878)
• Updates the @formkit/cli package to allow generating of published themes locally in your projects. See the new documentation here. (#​1170)

🐛 Bug fixes

• Fixes issue where multi-step would not allow schema overrides of tabs or tab sections. (1110)

v1.5.3

🐛 Bug fixes

• Fixes a bug that caused some dynamic validation rules to stop working after the rules were updated (#​1155)
• Fixes a regression in 1.5.0 that caused some FormKit packages to not be tree shaken properly (#​1139)
• Fixes a bug that caused errors initially set with the :errors prop to not always be displayed initially (#​1153)

v1.5.1

Compare Source

🐛 Bug fixes

• Fixes a bug introduced in 1.5.0 that caused the context.value to not properly synced with the node.value inside of nested group structures (#​1133).

v1.5.0

Compare Source

FormKit 1.5.0 ships with a new development build of FormKit. In development FormKit now uses slightly different versions of its packages that include additional developer experience enhancements. This is similar to how Vue itself has "development" and "production" versions, and it allows FormKit to provide an improved developer experience such as improved HMR support and better error messages.

The groundwork is now laid for greatly improved developer experience in future releases. This release also includes dozens of bug fixes and improvements.

💪 New features

• Adds a new API for adding props to inputs with default values, boolean props, and getters/setters. See the updated docs for more info.
• createInput now supports a third argument, sectionsSchema which allows you to extend the default sections that come with createInput (#​882).
• Adds new context property didMount and node event mounted to recognize when the <FormKit> component is mounted to the DOM (#​0b8753d).
• Now node.children are observed by @formkit/observer, this allows validation rules to access node.children with reactivity.
• Hot module replacement with Vite/Nuxt now preserve the form state when updating form code (#​1068)
• Adds new changeLocale composable that globally changes the locale of all forms with Options API, Composition API, and Nuxt autoimport (#​1112)
• Rules allow_non_alpha and allow_numeric.
• The new FormKit cli now scaffolds new apps (npx formkit create-app) to use themes.formkit.com’s theme system.
• New development build of FormKit that includes additional developer experience enhancements.

🐛 Bug fixes

• Fixes Vite TSDoc comment warnings - by Yue Yang (e47c9)
• Fix windows create-app name for nuxt projects (1066)
• Inputs that use options (select, checkbox, radio, autocomplete etc) now properly count their __mask value (#​1046).
• Fixes a bug that did now allow submitAttrs to disable submit input (#​789).
• Removes data-disabled on checkbox and radio inputs when false - (#​1043).
• Fixes autoAnimate when used on repeaters and other inputs with complex conditionals (#​1016).
• Significantly improves @formkit/nuxt’s experimental autoImport feature (1095, and others).
• Autoheight textarea hydration in nuxt (#​980).
• Adds non-blocking messages in getValidationMessages (#​849).
• node.clearErrors() always removes errors local to that node (#​941)
• Reduces re-renders on destructured group values (#​1068).
• Removes warning on multi-step about default slot being called outside render function (#​920).
• Inputs inside a disabled repeater can be enabled per-input (#​1043).
• Improves typing for createInput() (#​1105).
• Removes data-complete on groups/lists (#​1038).
• Boolean props like disabled and preserve can now be used without explicitly setting them to true or false (#​989).

[!IMPORTANT]
Vitest does not automatically use the same node parameters (conditions) that Vite does (see #​4971). If you find your tests failing after you update, you can add the following to your vitest.config.js file:

v1.4.0

Compare Source

💪 New features

• FormKit now supports themes for TailwindCSS! Customize the look and feel of your forms with a visual editor. See themes.formkit.com for more information.
• Adds new <KitchenSink> component that renders a specimen of every FormKit input (helpful for styling).
• Adds new state.required property to the context object (makes adding asterisks to required inputs easier).
• Adds aria-required attribute to <input>, <select>, and <textarea> elements when they are required (#​984).
• Adds new force-show prop to the <FormKitSummary> component to force the summary to show even if there are no visible errors.
• Adds new create-theme command for the formkit CLI tool to scaffold a new theme from @formkit/theme-starter.

🐛 Bug fixes

• Fixes a bug that caused radio inputs inside repeaters to become coupled (#​1044).
• Fixed an issue that caused node.submit() to fail when inside a custom element’s shadow root (#​1057).
• Fixes a bug that caused pro inputs to not produce proper memokeys (#​933).
• Fixed a bug that caused attributes to not pass through <FormKitProvider> (and related providers) (#​1013).
• Moved the invalidDate message to the to the validation locale key (#​953)
• Improved the min and max validation message (en) to be the validation locale key (#​953)
• Fixed a bug that prevented the incomplete-message prop (on forms) from being reactive (#​1047).

v1.3.2

Compare Source

💪 New features

• Adds a new plugins for counting available characters in an input based on the length rule.
• Adds a <KitchenSink> component that renders all input specimen.
• Adds a data-has-multiple attribute to file inputs on the outer section when they have multiple files.
• Adds Tailwind styles for togglebuttons

🐛 Bug fixes

• Fixes a bug with on the select input with option groups containing non-string values (#​986).
• Fixes an issue with nuxt autoImport in webpack (#​983)
• Fixes a bug that prevent deeply nested inputs from receiving the correct input value during a reset (#​1025)
• Fixes create-app command of the formkit cli tool when installing vite.
• Fixes a bug that caused the @formkit/nuxt module with autoImport to not include the FormKit component (#​995)
• Fixes Tailwind styles for alignment of prefix icon in button family of inputs.
• Fixes togglebuttons text color in default Tailwind Genesis theme.

v1.2.2

Compare Source

🐛 Bug Fixes

• Fixes a bug with @formkit/nuxt in autoImport mode where the SSR context was not being reset after each request leading to hydration errors and broken UI on some pro inputs.

v1.2.1

Compare Source

🐛 Bug Fixes

• Improves dev mode support for @formkit/nuxt with the autoImport option enabled.

v1.2.0

Compare Source

💪 New features

• The select input now supports grouped options (<optgroup>) (#​426).
• The @formkit/nuxt package now includes an experimental autoImport option that only loads FormKit on the pages it is used rather than globally. This will remove FormKit from your entry file. We plan to eventually make this the default behavior and encourage everyone using the current nuxt module to try the new option.
• Adds support for prefix-icon and suffix-icon to inputs created with createInput().
• Significantly improves tree shaking of inputs and configuration options (with manual configuration).
• Adds Tailwind support for new colorpicker input.
• Adds new color icon.

📙 Documentation

• New guide: Optimizing for Production

🐛 Bug Fixes

• Zod plugin now iterates over issues not errors (#​945)

[!NOTE]
Small housekeeping note, from here on out FormKit’s primary repositories will be using conventional commits.

v1.1.0

Compare Source

💪 New features

• Adds new <FormKitProvider :config="yourConfig"> — a component that defines a new configuration boundary. Any <FormKit> components that are nested beneath a <FormKitProvider> will inherit their configuration from this location.
• Adds a new <FormKitLazyProvider> which checks for a higher order <Suspense> boundary (if not found it injects one) and injects a <FormKitConfigLoader> component.
• Adds a new <FormKitConfigLoader> component. An async component that performs a dynamic import for a configuration file.

Note: The new components listed above are currently experimental and will be documented further as the API stabilizes.

🐛 Bug Fixes

• Fixes a bug in the TypeScript definition of the <FormKit> component that causes a TypeScript error in Vue Language Tools (Volar) > 1.8.11.
• Improves tree shaking across the board for @formkit/* packages.
• Fixes a bug in the many of the alpha, alphanumeric, and contains_* validation rules for the latin charset.

v1.0.0: 🎉

Compare Source

With this release we are officially declaring FormKit stable and production ready. Many community members have already been using FormKit in production for over a year now and have been very happy with the results. We hope you will be too!

Additionally FormKit Pro is now available to the general public (no early access required). FormKit Pro is still in Beta, and we are working hard to prepare it for a stable release.

💪 New features

• Adds a new <FormKitSummary> component that automatically lists all the errors and validation messages in a form with jump links to each (a11y).

🐛 Bug Fixes

• Improves focus styles for the radio, checkbox, and range inputs (a11y).
• Improves genesis contrast ratio to 4.5:1 (a11y).
• file input now includes the file name in the remove file button (a11y).
• The file input now re-focuses after removing a file (a11y).